<template>
  <div>
    <v-chart :options="options" :autoresize="true" @click="handleClick"/>
  </div>
</template>

<script>
// colors
const blue = '#2952a3'
// settings
const barWidth = '50px'
const padding = '10px'
const padding2 = '50px'
// data
const Engine = [7.22, 6.83, 6.86, 6.59, 6.59, 6.61, 6.46, 6.38, 6.37, 6.34, 6.38, 6.35, 6.34]
const PDTarget = [7.24, 6.95, 6.86, 6.59, 6.59, 6.61, 6.46, 6.38, 6.37, 6.34, 6.38, 6.35, 6.34]

const itemStyle1 = {
  color: '#ddd'
}
const itemStyle2 = {
  color: '#fff',
  borderColor: '#666',
  borderType: 'dashed'

}
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      options: {
        title: {
          text: 'Engine (Phase I/II)',
          textStyle: { color: blue }
        },
        tooltip: {
          show: true
        },
        grid: [
          {
            containLabel: true,
            top: padding2,
            bottom: padding,
            left: padding,
            right: '310px'
          },
          {
            containLabel: true,
            top: padding2,
            bottom: padding,
            right: '160px',
            width: '100px'
          },
          {
            containLabel: true,
            top: padding2,
            bottom: padding,
            right: padding,
            width: '100px'
          }
        ],
        legend: {
          data: ['PD Target', 'FC', 'Act'],
          right: padding
        },
        xAxis: [
          {
            gridIndex: 0,
            type: 'category',
            data: ['12/2016', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nev', 'Dec'],
            splitLine: {
              show: false
            },
            axisTick: { show: false }
          },
          {
            gridIndex: 1,
            type: 'category',
            data: ['YTD 2017'],
            axisTick: { show: false }
          },
          {
            gridIndex: 2,
            type: 'category',
            data: ['Forecast'],
            axisTick: { show: false }
          }
        ],
        yAxis: [
          {
            show: false,
            gridIndex: 0,
            type: 'value',
            splitLine: {
              show: false
            },
            max: 8
          },
          {
            show: false,
            gridIndex: 1,
            type: 'value',
            splitLine: {
              show: false
            },
            max: 8
          },
          {
            show: false,
            gridIndex: 2,
            type: 'value',
            splitLine: {
              show: false
            },
            max: 8
          }
        ],
        series: [
          {
            name: 'PD Target',
            data: PDTarget,
            type: 'line',
            color: blue,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              width: 3
            }
          },
          {
            data: [
              {
                value: Engine[0],
                itemStyle: itemStyle1
              },
              {
                value: Engine[1],
                itemStyle: itemStyle1
              },
              {
                value: Engine[2],
                itemStyle: itemStyle1
              },
              {
                value: Engine[3],
                itemStyle: itemStyle1
              },
              {
                value: Engine[4],
                itemStyle: itemStyle2
              },
              {
                value: Engine[5],
                itemStyle: itemStyle2
              },
              {
                value: Engine[6],
                itemStyle: itemStyle2
              },
              {
                value: Engine[7],
                itemStyle: itemStyle2
              },
              {
                value: Engine[8],
                itemStyle: itemStyle2
              },
              {
                value: Engine[9],
                itemStyle: itemStyle2
              },
              {
                value: Engine[10],
                itemStyle: itemStyle2
              },
              {
                value: Engine[11],
                itemStyle: itemStyle2
              },
              {
                value: Engine[11],
                itemStyle: itemStyle2
              }
            ],
            type: 'bar',
            label: {
              show: true,
              color: '#666'
            },
            barWidth: barWidth
          },
          {
            name: 'FC',
            color: ['#ccc'],
            type: 'bar',
            label: {
              show: true,
              color: '#666'
            },
            data: [
              {
                value: 6.83,
                itemStyle: itemStyle1

              }
            ],
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: barWidth,
            markLine: {
              symbol: 'none',
              label: {
                show: true,
                position: 'start'
              },
              lineStyle: {
                color: '#666'
              },
              data: [
                {
                  yAxis: 6.95
                }
              ]
            },
            markPoint: {
              itemStyle: {
                color: 'green'
              },
              data: [
                {
                  value: '-2%',
                  yAxis: 6.83,
                  symbol: 'pin',
                  symbolOffset: [0, '-5px']
                }
              ]
            }
          },
          {
            name: 'Act',
            color: ['#ccc'],
            type: 'bar',
            label: {
              show: true,
              color: '#666'
            },
            data: [
              {
                value: 6.49,
                itemStyle: itemStyle2
              }
            ],
            xAxisIndex: 2,
            yAxisIndex: 2,
            barWidth: barWidth,
            markLine: {
              symbol: 'none',
              label: {
                show: true,
                position: 'start'
              },
              lineStyle: {
                color: '#666'
              },
              data: [
                {
                  yAxis: 6.49
                }
              ]
            },
            markPoint: {
              data: [
                {
                  value: '0%',
                  yAxis: 6.49,
                  symbol: 'pin',
                  symbolOffset: [0, '-5px']
                }
              ]
            }
          }
        ]
      }
    }
  },
  methods: {
    handleClick (params) {
      if (this.allowToInfo(params)) {
        console.log(params.name)
        this.$router.push({
          path: '/hpe',
          query: {
            month: params.name
          }
        })
      } else {
        console.log('not allow')
      }
    },
    allowToInfo (params) {
      const allowToInfoData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      return params.seriesType === 'bar' && allowToInfoData.indexOf(params.dataIndex) !== -1
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
div.echarts {
  width: 100%;
}
</style>
